<html>
<head>
<#assign basePath=request.contextPath>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>后台管理系统</title>
<#include "/WEB-INF/views/template/bootMainCss.ftl" parse=true encoding="utf-8">
    <link href="${basePath}/bootstrap/css/form.lzy.css" rel="stylesheet">

    <style>
        .name {
            float: right;
        }

        .row {
            margin: 0;
        }

        .shop-img {
            text-align: left;
            padding-left: 30px;
        }

        .shop-img img {
            margin-right: 10px;
        }

        .panel-body {
            padding-bottom: 15px;
        }

        #tbodyId {
            font-size: 13px;
        }

        #myTable thead {
            font-size: 14px;
        }

        #qrcodeBox {
            width: 400px;
            height: 400px;
            display: none;
        }

        #qrcodeBox canvas {
            margin: 40px auto 0;
            display: block;
        }
    </style>
</head>
<body>
<shiro:hasPermission name="sys:product:add">
    <input id="p_add" value="1" type="hidden">
</shiro:hasPermission>
<shiro:hasPermission name="sys:product:update">
    <input id="p_update" value="1" type="hidden">
</shiro:hasPermission>
<shiro:hasPermission name="sys:product:delete">
    <input id="p_delete" value="1" type="hidden">
</shiro:hasPermission>
<div class="panel panel-lzy">
    <div class="panel-body">
        <h5 class="tips-lzy">操作提示</h5>
        <ul class="tips-list-lzy">
            <li>◆&nbsp;<span>所有代理商管理和新增。</span></li>
        </ul>
    </div>
</div>


<div class="panel panel-f5">
    <div class="panel-body row name">
        <div class="form-group" style="width: 640px;">
            <select class="form-control" name="province" onchange="changeProvince()" id="proCode">
            </select>
            <select class="form-control" name="city" onchange="changeCity()" id="curCode">
            </select>
            <select class="form-control" name="area" id="disCode" onchange="changeArea()">
            </select>
            <form id="myForm" class="form-inline form-margin-right" style="display: inline-block">
                <input type="hidden" id="cityCode" value="">
                <input type="text" class="form-control" id="phoneOrName" size="25" placeholder="代理商姓名/手机号">
                <button type="button" class="btn btn-primary btn-sm" onclick="search(1)">查询</button>
            </form>
        </div>
    </div>
    <div class="panel-heading row">
        <shiro:hasPermission name="sys:product:add">
            <button type="button" class="btn btn-primary" onclick="addMeal();"><span class="fa fa-plus"></span> 新增
            </button>
        </shiro:hasPermission>
    </div>
    <!-- 分页查询的地址-->
    <div class="panel-body panel-white">
        <div class="table-responsive">
            <table id="myTable"
                   class="table table-hover"
                   data-url="${basePath}/admin/agent/manage/json"
                   data-pageSize="10,50,100" data-method="GET">
                <thead>
                <!-- 需要循环的字段  对应mapper文件-->
                <tr>
                    <th data-type="xuhao">序号</th>
                    <th data-field="id">代理商ID</th>
                    <th data-field="qrcode" data-call="true">二维码</th>
                    <th data-field="nickName">会员昵称</th>
                    <th data-field="phone">代理商手机</th>
                    <th data-field="name">姓名</th>
                    <th data-field="agentNumber" data-call="true">代理商编号</th>
                    <th data-field="location" data-call="true">所在地</th>
                    <th data-field="superior" data-call="true">所属上级</th>
                    <th data-field="system" data-call="true">所属体系</th>
                    <th data-field="agentTime" data-call="true">成为代理商时间</th>
                    <th data-field="state" data-call="true">状态</th>
                    <th data-field="button" data-call="true">操作</th>
                </tr>
                </thead>
                <tbody id="tbodyId">

                </tbody>
            </table>
        </div>
        <!-- 分页条-->
        <div class="row">
            <div align="left" class="col-xs-6">
                <div class="input-group">
                    <span class="input-group-addon" id="pageCount"></span> <select
                        id="pageSize" onchange="search(1)" class="form-control"
                        style="width: 100px"></select>
                </div>
            </div>
            <div align="right" class="col-xs-6">
                <ul class="pagination" id="pagination"></ul>
            </div>
        </div>
    </div>
</div>

<div id="qrcodeBox"></div>
<#include "/WEB-INF/views/template/bootMainJs.ftl" parse=true encoding="utf-8">
<script type="text/javascript" src="${basePath}/bootstrap/js/utils.js" type="text/javascript"></script>
<script type="text/javascript" src="${basePath}/bootstrap/plugin/jqPaginator/jqPaginator.js"></script>
<script type="text/javascript" src="${basePath}/bootstrap/plugin/jqPaginator/myPage.js"></script>
<script src="${basePath}/bootstrap/js/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="${basePath}/bootstrap/plugin/jqPaginator/jqPaginator.js"></script>
<script src="${basePath}/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="${basePath}/bootstrap/plugin/layer/layer.js" type="text/javascript"></script>
<script type="text/javascript" src="/bootstrap/js/jquery.qrcode.min.js" type="text/javascript"></script>
<script src="${basePath}/bootstrap/js/common.js" type="text/javascript"></script>
<script type="text/javascript"
        src="${basePath}/bootstrap/plugin/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript"
        src="${basePath}/bootstrap/plugin/bootstrap-datetimepicker/bootstrap-datetimepicker.zh-CN.js"></script>
<script type="text/javascript">
    //循环列表数据以及操作按钮
    function tableCallBack(data, id) {
        if (id == 'button') {//增加操作按钮
            var count = 0;
            var _button = '<button type="button" class="btn btn-white btn-xs" data-id="' + data.id + '" data-name="' + data.name + '" data-phone="' + data.phone + '" onclick="viewLower(this);">查看下级 </button> ';
            if ($('#p_update').val() == 1) {
                _button += '<button type="button" class="btn btn-white btn-xs" onclick="viewMeal(' + data.id + ');">查看 </button> ';
            }
            return _button;
        }
        else if (id == 'qrcode') {
            return '<button type="button" class="btn btn-white btn-xs" onclick="createQrcode(' + data.saleMan + ');">生成二维码 </button> '
        }
        else if (id == 'state') {
            if (data[id] == '0') {
                return '<label><input  class="ace ace-switch ace-switch-6" type="checkbox" checked  onclick="updateStatus(0,' + data.id + ');"/><span class="lbl"></span></label>';
            } else {
                return '<label><input  class="ace ace-switch ace-switch-6" type="checkbox" onclick="updateStatus(1,' + data.id + ');"/><span class="lbl"></span></label>';
            }
        }
        else {
            if (data[id] == null || data[id] == '') {
                return '';
            } else {
                return data[id];
            }
        }
    }

    //省
    function initProvince(proval) {
        $.ajax({
            type: "get",
            url: '${basePath}/admin/agent/manage/queryCity/1/1?cityCode=',
            dataType: 'json',
            success: function (data) {
                var prohtml = "<option value=''>请选择省份</option>";
                data = data.result;
                for (var i = 0; i < data.length; i++) {
                    if (proval == data[i].proCode) {
                        prohtml = prohtml + ("<option selected='selected' value=" + data[i].cityCode + ">" + data[i].name + "<\/option>");
                    } else {
                        prohtml = prohtml + ("<option  value=" + data[i].cityCode + ">" + data[i].name + "<\/option>");
                    }
                }
                $("#proCode").html(prohtml);
                $("#curCode").html("<option value=''>请选择城市</option>");
                $("#disCode").html("<option value=''>请选择区/县</option>");
            }
        }).done(function () {
            if (proval != "") {
                changeProvince(proval);
            }
            $("#proCode").change(function () {
                var id = $(this).val();
                changeProvince(id);
            });
        });
    }

    //市
    function changeProvince(id) {
        $('#curCode').val(id);
        $('#cityCode').val(id);
        var cityVal = "";
        $.ajax({
            type: "get",
            url: '${basePath}/admin/agent/manage/queryCity/2/1?cityCode=' + $("#proCode").val(),
            dataType: 'json',
            success: function (data) {
                var cityhtml = "<option value=''>请选择城市</option>";
                data = data.result;
                for (var i = 0; i < data.length; i++) {
                    if (cityVal == data[i].cityCode) {
                        cityhtml = cityhtml + ("<option selected='selected' value=" + data[i].cityCode + ">" + data[i].name + "<\/option>");
                    } else {
                        cityhtml = cityhtml + ("<option  value=" + data[i].cityCode + ">" + data[i].name + "<\/option>");
                    }
                }
                $("#curCode").html(cityhtml);
                $("#disCode").html("<option value=''>请选择区/县</option>");
            }
        }).done(function () {
            if (cityVal != "") {
                var id = $("#cityCode").val();
                changeCity(id);
            }
            $("#curCode").change(function () {
                var id = $(this).val();
                changeCity(id);
            });
        });
    }

    //区/县
    function changeCity(id) {
        $('#cityCode').val(id);
        $.ajax({
            type: "get",
            url: '${basePath}/admin/agent/manage/queryCity/3/1?cityCode=' + $("#curCode").val(),
            data: {id: id},
            dataType: 'json',
            success: function (data) {
                var areaVal = "";
                var areahtml = "<option value=''>请选择区/县</option>";
                data = data.result;
                for (var i = 0; i < data.length; i++) {
                    if (areaVal == data[i].disCode) {
                        areahtml = areahtml + ("<option selected='selected' value=" + data[i].cityCode + ">" + data[i].name + "<\/option>");
                    } else {
                        areahtml = areahtml + ("<option value=" + data[i].cityCode + ">" + data[i].name + "<\/option>");
                    }
                }
                $("#disCode").html(areahtml);
            }
        });
    }

    function changeArea() {
        //$("#disCode").val() && $('#cityCode').val($("#disCode").val());
        if($("#disCode").val()){
            $('#cityCode').val($("#disCode").val());
        }
    }


    $(function () {
        //省市县
        var proval = "";
        initProvince(proval);
    })

    /*生成二维码*/
    function createQrcode(id) {
        var date = new Date();
        var month = date.getMonth();
        var day = date.getDate();
        if (month < 9) {
            month = "0" + (month + 1);
        }
        if (day < 10) {
            day = "0" + day;
        }
        var dateStr = date.getFullYear().toString() + month.toString() + day.toString();
        var str = "${share_uri}/share/pages/agent/index.html?version=" + dateStr + "&saleMan=" + id;
        $('#qrcodeBox').html('');
        $('#qrcodeBox').qrcode(str);
        layer.open({
            type: 1,
            area: ['400px', '400px'],
            title: ['&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;二维码', 'text-align:center;'],
            content: $('#qrcodeBox')
        })

    }

    //更改显示状态
    function updateStatus(status, id) {
        $.ajax({
            type: 'POST',
            url: '${basePath}/admin/agent/manage/updateStats/' + id,
            dataType: 'json',
            data: {
//                id: id,
//                status:status
            },
            success: function (data) {
                if (data.code == '0') {
                    refreshGrid();
                }
            }
        });
    }

    //查看下级
    function viewLower(obj) {
        window.location.href = '${basePath}/admin/agent/manage/tounderLevelView/?id=' + $(obj).attr("data-id") + '&name=' + encodeURI($(obj).attr("data-name")) + '&phone=' + $(obj).attr("data-phone");
    }

    //详情
    function viewMeal(id) {
        window.location.href = '${basePath}/admin/agent/manage/toagentView/?id=' + id;
    }

    //新增
    function addMeal() {
        window.location.href = '${basePath}/admin/agent/manage/toagentAdd';
    }

</script>
</body>
</html>